<template>
  <div class="login_container">
    <el-form ref="loginRef" :model="form" class="login-box" :rules="rules">
      <h3 style="text-align: center">用户登录</h3>
      <el-form-item label="帐号" prop="name">
        <el-input
          type="test"
          placeholder="请输入用户名"
          v-model="form.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          placeholder="请输入密码"
          v-model="form.password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="OnSubmit()">登陆</el-button>
        <el-button type="primary" @click="reset()">重置</el-button>
        <el-button type="primary" @click="Ischange()">跳转到管理员</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
 
 
<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        name: "keshe",
        password: "keshe2021",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入用户密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    reset(){
      this.$refs.loginRef.resetFields();
    },
    OnSubmit() {
      this.$refs.loginRef.validate(async valid => {
        if (!valid)return
        else if(this.form.name == ""){
          this.$message({
            showClose: true,
            message: "请输入用户名！",
            type: "warning",
          })} else if(this.form.password == ""){
          this.$message({
            showClose: true,
            message: "请输入密码！",
            type: "error",
          })}
          const {data:res} = await this.$http.post("Data/apis/login",this.form);
          if(res.code == 404){
            this.$message({
              showClose: true,
              message: "未找到该用户!",
              type: "error",
            });
            return;
          }
          if(res.code == 422){
            this.$message({
              showClose: true,
              message: "密码错误!",
              type: "error",
            });
            return;
          }
          if(res.code == 200){
            window.sessionStorage.setItem('limits',1);
            this.$router.push('/selepurch');
          }
        }
        )
    },

    Ischange(){
      this.$router.push('/Backstage');
    },

  },
};
</script>

<style>
.login-box {
  width: 350pt;
  margin: 150px auto;
  border: 1px solid #dcdfe6;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 30px #dcdfe6;
}
</style>